<template>
	<view>
		<scroll-view scroll-x class="bg-white nav fixed">
			<view class='flex text-center'>
				<view class="cu-item flex-sub text-df " @click="navselect(index)" v-for="(nav,index) in navlist"
					:key="index" :class="[index == currentIndex ? 'text-red cur' : '']">
					{{nav}}
				</view>
			</view>
		</scroll-view>
		<view v-if="order_list.length != 0" style="padding-top: 85upx;">
			<view v-for="(orderdetail,index) in order_list" :key="index">
				<view class="bg-white margin-sm padding-sm solids-bottom shadow radius text-content"
					@click="goDetail(orderdetail)">
					<view class="flex justify-between">
						<view class="text-bold" style="flex-shrink: 0;">
							<text class="text-red">{{ orderdetail.status_name?orderdetail.status_name:'' }}</text>
						</view>
						<view @click.stop="paste(orderdetail.order_id)"><text
								class="icon-goods padding-right-sm"></text><text
								class="text-bold solids-bottom">{{ orderdetail.order_id }}</text></view>
					</view>
					<view>
						<view class="flex padding-top-sm solids-top">
							<image
								:src="orderdetail.pic ? orderdetail.pic : 'http://asset.duozhuayu.com/sell_intro_2.png'"
								style="flex-shrink: 0;" mode="aspectFill" class="shadow cover radius solids"></image>
							<view class="flex text-content padding-left justify-between" style="flex-grow: 1;">
								<view>{{ orderdetail.title }}</view>
								<view style="flex-shrink: 0;">
									<view>￥{{ orderdetail.price }}</view>
									<view class="text-grey text-center" style="text-align: right;">×1</view>
								</view>
							</view>
						</view>
					</view>
					<view class="flex justify-end">
						合计{{ orderdetail.pay_price }}元</view>
						<view class="flex justify-end" style="color: #DD514C;">
							返现{{ orderdetail.income_price }}元</view>
					<view class="flex justify-end" style="font-size: 24upx;margin-top: 10upx;">
<!-- 						<button @click.stop="kefu(orderdetail)"
							class="round lines-grey cu-btn shadow mid margin-right-sm">合同签署</button> -->
						<view v-if="orderdetail.status == '0'">
<!-- 							<view class="round cu-btn lines-grey mid shadow margin-right-sm"
								@click.stop="cancel(index)">取消订单</view> -->
							<view class=" round cu-btn lines-orange mid shadow" @click.stop="goDetail(orderdetail)">立即付款
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- <view style="margin-bottom: 50upx;">
				<uni-pagination :total="total[currentIndex]" pageSize="10" :current="pages" @change="paginat">
				</uni-pagination>
			</view> -->
		</view>
		<view class="mygdd" v-if="order_list.length == 0">
			<image src="../../static/mydd.png" style="width: 300upx;height: 300upx;"></image>
			<view>暂无订单</view>
		</view>
		<u-loadmore v-if="order_list.length != 0" :status="statuss" />
	</view>
</template>

<script>
	import uniPagination from "@/components/uni-pagination/uni-pagination.vue"
	export default {
		data() {
			return {
				now: -4,
				statuss: 'loadmore',
				list: 15,
				page: 0,
				leng: 0,
				navlist: [
					'全部', '待付款', '已付款', '进行中', '已完成'
				],
				currentIndex: 0,
				pages: 0,
				order_list: [],
				total: {
					"0": "20",
					"1": "4",
					"2": "8",
					"3": "1",
					"4": "0"
				}, //各类订单的总数
				status: '',
				user: {
					id: 666
				} //此对象为用户信息，实际线上环境为vuex中的全局对象，像后端请求数据十需要使用
			}
		},
		components: {
			uniPagination
		},
		onShow() {
			this.cancels()
		},
		onReachBottom() {
			this.status = 'loading';
			this.page = this.page + 1;
			setTimeout(() => {
				this.list += 10;
				if (this.leng < 10) {
					this.status = 'nomore';
				} else {
					this.status = 'loading';
					this.getOrderList(this.now)
				}
			}, 2000)
		},
		onUnload(event) { //多层级跳转之后，监听左上角返回事件，直接退回到index
			uni.switchTab({
				url: '/pages/my/index'
			})
		},
		watch: {
			'currentIndex'() {
				this.page = 0
				this.order_list = []
				 if (this.currentIndex == 1) {
					this.getOrderList(1)
					this.now = 1
				} else if (this.currentIndex == 2) {
					this.getOrderList(2)
					this.now = 2
				} else if (this.currentIndex == 3) {
					this.getOrderList(2)
					this.now = 2
				} else if (this.currentIndex == 4) {
					this.getOrderList(4)
					this.now = 4
				} else {
					this.getOrderList()
				}
			}
		},
		onLoad(e) {
			this.currentIndex = e.index
		},
		mounted() {
			// this.getOrderList(-4)
		},
		methods: {
			kefu (val) {
				this.$request('', '/api/shop/getcontract', 'POST', {
					order_id: val.id
				}, {}).then(res => {
					var signUrl = res.data
					my.navigateToMiniProgram({
					     appId: '2021001152620480',
					     path:`pages/signH5/index?signUrl=${signUrl}`,
					     success: (res) => {
					       console.log(JSON.stringify(res))
					     },
					     fail: (res) => {
					       console.log(JSON.stringify(res))
					     }
					  });
				})
			},
			goDetail(val) {
				console.log(val.id)
				uni.navigateTo({
					url: '/pages/order/detail?id=' + val.trade_id
				})
			},
			navselect(index) {
				this.currentIndex = index
			},
			getOrderList(index) {
				var param = {
					type: 'p',
					status: index ? index : '',
					pageNum: this.page,
					pageSize: 10
				}
				this.$request('', '/api/app/xcx/xcxorder', 'POST', param, {}).then(res => {
					this.leng = res.data.length
					for (let j in res.data) {
						this.order_list.push(res.data[j])
					}
					// this.order_list = res.data.data
				})
			},
			// 取消订单
			cancels(id) {
				this.$request('', '/api/app/xcx/importorder', 'POST', {
					type: 'pdd'
				}, {}).then(res => {
				})
			}
		}
	}
</script>

<style>
	/*每个页面公共css */
	/* @import url("./colorui.css"); */
	.cover {
		width: 150upx;
		height: 150upx;
	}
	.mygdd{
		width: 100%;
		height: 100vh;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		font-weight: bold;
	}
</style>
